<template>
  <SetUpForm
    ref="setupFormRef"
    :tabCodeList="tabCodeList"
    v-model:set-up-list="setUpList"
    v-model:layout="rest"
  />
  <a-space class="save-btn" direction="vertical" fill>
    <a-button @click="save" :type="'primary'" style="width: 200px">
      保存表单
    </a-button>
  </a-space>
</template>
<script setup lang="ts">
import { getFlowCtlList, AddFlowCtl, editFlowCtl } from '@/apis/flowFormCtl';
import type {
  FlowForm,
  FlowFormControlDetail,
  FlowFormSubsetDetail
} from '@/apis/flowFormCtl/type';
import SetUpForm from '@/components/DyForms/DynamicForms/SetUpForm/index.vue';
import { useRoute } from 'vue-router';
import uniqueid from 'lodash.uniqueid';
import { cloneDeep } from 'lodash';

const emits = defineEmits(['save']);
const route = useRoute();
const rest = ref('horizontal');
const tabCodeList = reactive(['baseComponent', 'businessComponent']);
const setUpList = ref<(FlowFormControlDetail | FlowFormSubsetDetail)[]>([]);
const getList = async () => {
  setUpList.value = [];
  let res = await getFlowCtlList(id.value);
  if (!res || !res.formInfo) return;
  const { controlDetailList, subsetDetailList } = res.formInfo;
  subsetDetailList?.forEach((item) => {
    item.componentType = 'CONTAINER';
  });

  // merge
  setUpList.value = [...(controlDetailList || []), ...(subsetDetailList || [])];

  setUpList.value.sort((a: any, b: any) => a.orderNo - b.orderNo);
  setUpList.value.forEach((item) => {
    item.uuid = uniqueid('');
    item.props = JSON.parse(item.props ? item.props : null); //子级转props转对象
    if (item?.controlDetailList?.length) {
      item.controlDetailList.sort((a: any, b: any) => a.orderNo - b.orderNo);
    }
    item?.controlDetailList?.forEach((ctl) => {
      ctl.uuid = uniqueid('');
      ctl.props = JSON.parse(ctl.props ? ctl.props : null); //子级转props转对象
    });
    item?.childrenCtl?.forEach((chi) => {
      chi.uuid = uniqueid('');
      chi.props = JSON.parse(chi.props ? chi.props : null); //子级转props转对象
    });
  });
  // console.log("setUpList.value", setUpList.value);
};
const id = ref<number>(0);
const init = () => {
  id.value = Number(route.query.id);
  if (id.value > 0) {
    getList();
  }
};
init();
const setupFormRef = ref();

const save = async () => {
  const formCtl: FlowForm = {
    processId: id.value,
    subsetDetailList: [],
    controlDetailList: []
  };
  const ctlForm = cloneDeep(setupFormRef.value.copySetUpList);
  const subsetList: any[] = []; // 子集列表
  const ctlList: any[] = []; // 控件列表
  const changeControl: any[] = []; //默认控件信息修改
  if (!ctlForm.length) return;
  ctlForm.forEach((item: any, index) => {
    item.props = JSON.stringify(item.props);
    // 修改默认控件排序
    item?.controlDetailList?.forEach((chi, chiIndex) => {
      chi.props = JSON.stringify(chi.props);
      chi.orderNo = chiIndex + 1;
      changeControl.push({
        id: chi.id,
        orderNo: chi.orderNo,
        isUseCondition: chi.isUseCondition
      });
    });
    item.orderNo = index + 1;
    if (item.isDefault === 1) {
      // changeControl.push({
      //   id: item.id,
      //   orderNo: item.orderNo,
      //   isUseCondition: item.isUseCondition,
      // });
      return;
    }
    if (item.componentType === 'CONTAINER') {
      item.controlDetailList.forEach((ctl: any, ctlIndex) => {
        ctl.orderNo = ctlIndex + 1;
        ctl.isCustom = 1;
      });
      subsetList.push(item);
    } else {
      item.isCustom = 1;
      ctlList.push(item);
    }
  });

  formCtl.subsetDetailList = subsetList;
  formCtl.controlDetailList = ctlList;
  formCtl.changeControl = changeControl;
  // console.log("formCtl", formCtl);

  await AddFlowCtl(formCtl);
};
</script>
<style lang="less" scoped>
.btn {
  position: fixed;
  top: 14px;
  right: 16px;
}
.save-btn {
  height: 60px;
  // width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  // position: fixed;
  // bottom: 0;
  // left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  // z-index: 9999;
}
</style>
